import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { Button } from '@block/plug';
import { ReportPreview, ReportLevel, ProblemAndProgressList, BizOpType, OpLogData } from '../../type';
import './ReportMobile.scss';

interface Props {
  reportData: ReportPreview;
  handleOpenAuditModel: () => void;
  handleOpenRiskModel: () => void;
  handleMonitor: (bizOpType: BizOpType, params?: OpLogData) => void;
}

/**
 * 移动端 审计报告预览
 */

const ReportMobile = (props: Props) => {
  const { reportData, handleOpenAuditModel, handleOpenRiskModel, handleMonitor } = props;

  const { problemAndProgressList } = reportData ?? {};
  const [activeTab, setActiveTab] = useState('');

  const [tabItem, setTabItem] = useState<ProblemAndProgressList>(null);

  const { businessProcess, efficiencySpace, auditFollowUp, problemDesc } = tabItem ?? {};

  const handleTabClick = (tab: string) => {
    const currentProgress = problemAndProgressList?.find((item) => item?.problemAndProgressId === tab);
    setActiveTab(tab);
    setTabItem(currentProgress);
  };

  useEffect(() => {
    if (problemAndProgressList?.length > 0) {
      const [defaultProgress] = problemAndProgressList ?? [];
      setActiveTab(defaultProgress?.problemAndProgressId);
      setTabItem(defaultProgress);
    }
  }, [problemAndProgressList]);

  return (
    <div className="project-report-preview-mobile">
      <div className="mobile-title">
        {reportData?.projectName ?? '-'}
        报告
        {reportData?.reportLevel && (
          <>{reportData?.reportLevel === ReportLevel.NO ? '' : `（报告等级${reportData?.reportLevelName}）`}</>
        )}
      </div>
      <div className="mobile-btn-upside">
        <Button type="primary" shape="text" onClick={handleOpenAuditModel}>
          查看审计报告等级定义
        </Button>
        <Button type="primary" shape="text" onClick={handleOpenRiskModel}>
          查看风险等级定义
        </Button>
      </div>
      <div className="preview-module">
        <div className="preview-module-title">一、审计结论</div>
        <div className="preview-module-cont">{(reportData?.auditConclusionMobile ?? '-') || '-'} </div>
      </div>
      <div className="preview-module">
        <div className="preview-module-title">二、重点审计发现</div>
        <div className="preview-module-cont">
          <div className="tab-list">
            {problemAndProgressList?.map((tab) => {
              const { problemAndProgressId, businessProcess: tabTitle } = tab ?? {};
              return (
                <div
                  key={problemAndProgressId}
                  className={classnames('tab-list-item', { 'tab-list-active': activeTab === problemAndProgressId })}
                  onClick={() => {
                    handleMonitor(BizOpType.viewProblemAndProgress, {
                      problemAndProgressId,
                    });
                    handleTabClick(problemAndProgressId);
                  }}
                >
                  {tabTitle || '-'}
                </div>
              );
            })}
          </div>
          <div className="tab-content">
            <div className="tab-title">{businessProcess || '-'}</div>
            <div className="tab-content-line">{problemDesc || '-'}</div>
            <div className="tab-cont-title">可提效空间：</div>
            <div className="tab-content-line">{efficiencySpace || '-'}</div>
            <div className="tab-cont-title">审计跟进：</div>
            <div>{auditFollowUp || '-'}</div>
          </div>
        </div>
      </div>
      <div className="preview-module">
        <div className="preview-module-title">三、审计发现详述</div>
        <div className="preview-module-cont detail-cont">详细审计发现请至PC查看</div>
      </div>
    </div>
  );
};
export default ReportMobile;
